@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Italianno');
@import url(nosotros.css);
@import url(repertorio.css);
@import url(reservas.css);

a{
letter-spacing: 2px;    
 font-family: 'Libre Franklin', sans-serif;     
}
h1,h2,h3,h4{
 font-family: 'Libre Franklin', sans-serif;  
letter-spacing: 5.5px;    
}
p{
font-family: monospace;   
}

img{
display: block;
max-width: 100%;
}

*{
 margin: 0;
 padding:0;
 box-sizing:border-box;
}

body{
background: #F8F9F9;
}


header{
width: 100%;
height: 130px;
position: relative;
top:0;
left: 0;
z-index: 100; 
/*background:#F8F9F9;*/    
}

header img{
display: block;
float: left;
margin-top:20px;
width: 280px;    
}

#menu-bar{
display: none;    
}

label{
 display:block;
}

header label{
float: right;
margin-top: 20px;    
font-size: 24px;
color:#E5E7E9;
background:black; 
padding: 5px;   
cursor: pointer;
border-radius: 4px;
}

label:hover{
background:  rgba(200,150,20,.5);  
transition: all 1s;  
color: yellow;
}




.contenedor{
width: 90%;
margin: auto;
}

h1{
display: none;    
}

section{
width: 100%;
}

header .contenedor{
display: table;
}


   

@media(min-width:768px){
    .best{
    position: absolute;    
    display: block;
    top:20px;
    left: 34.5%;    
    font-size: 30px;
    font-family: 'Italianno', cursive;        
    color:white;
    }

}
@media(min-width:1024px){
       
header img{
margin-top: 50px;
width: 356px;    
}
   
    
}




/****************************** MENU ***********************/




.menu{
position:absolute;
top: 60px;
right:0;
width:100%;
    

height: 100vh;    
transition: all 2s;
transform: translateX(-100%);
 }
   
.menu a{
display: block;
font-size: 14px;
color:white;
background: rgba(0,0,0,.8);    
text-decoration: none;
padding: 15px;
border-bottom: 2px solid white;  
}


.menu a:hover{
background: rgba(50,40,10,.9);
color: orange;
    
}

#menu-bar:checked ~ .menu{
transform: translateX(0%);
transition: all 2s;  
}
 
@media(min-width:1024px){
    header label{
        display: none;
    }  
    
   
    header{
        height: 161px;
    }
 
    
    .contenedor{
    width: 1050px;
        
    }    

    .menu{
        position: static;
        margin-top:4%;
        margin-left:70px;
        width:auto;
        height: auto;
        transform: translateX(0%);
        float:left;
        display: flex;
        border-bottom: 3px solid #F2D7D5;
        /*border-top: 1px solid #F2D7D5;
    */  }
    
    .menu a{
       font-size: 15px;
       color:#a68f64;
        margin: 20px;
       background: none;    
       border :none;
       font-family: 'Libre Franklin', sans-serif; 
     }
    
.menu a:hover{
background: rgba(226, 26, 38, 0.6);
color: white;
}
    
}


 /*-------------------------- B A N N E R --------------*/


#banner{
width: 100%;    
position: relative;
}

#banner img{
width: 100%;
height: 100%;
margin-top: 280px;
}

#banner .contenedor{
position: absolute;
top:-40%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}

 #banner .c1_titulo{
color:#a68f64;
font-size: 18px;
font-weight: 100;
line-height: 35px;
font-family: 'Libre Franklin', sans-serif;    
}

 #banner .c1_titulo2{
color: #a68f64;
font-size: 14px;
font-weight: 100;    
font-family: 'Libre Franklin', sans-serif;    
margin-top: 20px;
margin-bottom: 30px;
letter-spacing: 2px;     
}

#banner .cita_rep{
font-size: 18px;
font-weight:100;
text-decoration: none;    
color:#2C2C4A;
background: #F2D7D5; 
padding: 10px;  
cursor: pointer;
}

.reserv{
font-size: 28px;
font-weight:100;
text-decoration: none;    
color:#2C2C4A;
background: #F2D7D5; 
padding: 10px;  
cursor: pointer;
}

.fondo{
margin-top:50px;    
}


@media(min-width:468px){
#banner .contenedor{
position: absolute;
top:-20%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
}



@media(min-width:1024px){
    
#banner .contenedor{
top:20%;
}  
    
    #banner{
    margin-top: 400px;    
    }
    #banner img{
    margin-top: -320px;    
    } 
   
 #banner .c1_titulo{
font-size: 20px;
}  
  
 #banner .c1_titulo2{
font-size: 18px;
font-weight: 100;    
font-family: 'Libre Franklin', sans-serif;    
margin-top: 20px;
margin-bottom: 30px;
letter-spacing: 2px;     
}

#banner .cita_rep{
font-size: 22px;
}  
    
    .reserv{
    font-size: 8px;
    }   
}




/*---------------------  F O O T E R ------*/

#sect_footer{
background: #F2D7D5;
height: 180px;
 
}


.sociales {
text-align: center;    
font-size:60px;
display: block;
padding:10px;    
}

.sociales a{
color: black; 
text-decoration: none;  
}

h3{
display: block;  
color: gray;
font-size: 10px;
text-align: center;
margin-top: 15px;    
}

p{
text-align: center;    
font-size: 10px;    
margin-top: 20px;    
}